:root, [data-theme="classic"] {
    --footer-bg-color: var(--header-bg-color);
    --footer-header-color: var(--yellow500);
    --footer-header-shadow-color: var(--green900);
    --footer-link-color: #fff;
    --footer-link-hover-color: var(--yellow500);
    --footer-link-hover-shadow-color: var(--green900);
}

.footer {
    display: grid;
    justify-items: center;
    background: var(--footer-bg-color);
}

.content {
    display: grid;
    gap: var(--space-xl) var(--space-m);
    padding: var(--space-l);

    @media only screen and (min-width: 551px) {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        padding: var(--space-xl) var(--space-m);
    }

    @media only screen and (min-width: 751px) {
        grid-template-columns: repeat(4, 1fr);
    }

    :global(h1) {
        margin: 0 0 var(--space-s);
        font-size: 20px;
        font-weight: 500;
        color: var(--footer-header-color);
        text-shadow: 1px 1px 1px var(--footer-header-shadow-color);
    }

    :global(ul) {
        list-style: none;
        margin: 0;
        padding: 0;

        > * + * {
            margin-top: var(--space-xs);
        }
    }

    :global(li) {
        height: 1rem;
    }

    :global(a) {
        display: inline-flex;
        /* slightly increased click targets */
        margin: calc(var(--space-2xs) * -1);
        padding: var(--space-2xs);
        color: #fff;
        font-size: 16px;
        line-height: 1em;
        white-space: nowrap;
        transition: var(--transition-medium);

        &:hover {
            color: var(--footer-link-hover-color);
            text-shadow: 1px 1px 1px var(--footer-link-hover-shadow-color);
            /* apply color fade only on mouse-out */
            transition: var(--transition-instant);

            :global(svg) {
                filter: drop-shadow(1px 1px 1px var(--footer-link-hover-shadow-color));
            }
        }
    }

    :global(svg) {
        height: 1.25em;
        width: 1.25em;
        margin: -.125em var(--space-xs) -.125em 0;
        flex-shrink: 0;
    }
}
